<template>

	<view class="editor-box">
		<view class="back-header">
			<uni-icons fontFamily="iconfont" @click="goBack" :size="24" color="#727272"
				@tap="closeHandle">{{'\ue64f'}}</uni-icons>
			<view class="task-title">
				{{title}}
			</view>
		</view>

		<sp-editor :toolbar-config="{
          keys: ['header','bold','italic','underline','listOrdered','link','listBullet','H1','H2','H3','H4','H5','H6','undo','redo'],
          iconSize: '18px',
		  iconColumns:9
        }" @init="initEditor" @input="inputOver" :readOnly="disabled"></sp-editor>

		<view class="update-time" v-if="updateTime">
			{{updateTimeFormat(updateTime)}}
		</view>
	</view>

</template>

<script>
	import dayjs from 'dayjs'
	import {
		updateTimeFormat
	} from '@/utils/taskList'

	export default {
		data() {
			return {
				editorIns: null,
				editorContent: '',
				hasEdit: false
			}
		},
		props: {
			title: {
				type: String,
				default: ""
			},
			note: {
				type: String,
				default: ""
			},
			updateTime: {
				type: String,
				default: ""
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			note: {
				handler(newV) {
					this.editorContent = newV
				},
				immediate: true

			},
		},

		methods: {
			updateTimeFormat,
			initEditor(editor) {
				editor.setContents({
					html: this.editorContent
				})
			},
			inputOver({
				html
			}) {
				this.hasEdit = true
				this.editorContent = html
			},
			closeHandle() {
				this.$emit('close', {
					note: this.editorContent,
					noteUpdateTime: this.hasEdit ? dayjs().format('YYYY-MM-DD HH:mm:ss') : this.updateTime
				})
			}
		},
		onBackPress() {

		}
	}
</script>
<style lang="scss" scoped>
	@import "@/static/iconfont/iconfont.css";

	.editor-box {
		height: 100vh;
		width: 100vw;
		background-color: #eee;
		padding-top: var(--status-bar-height);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.back-header {
			display: flex;
			align-items: center;
			color: #333;
			min-height: 60upx;
			padding: 0 16upx;
			box-sizing: border-box;

			.task-title {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				font-size: 32upx;
				margin-left: 16upx;
			}

		}

		/deep/ .sp-editor {
			flex: 1;
		}

		.update-time {
			color: #7e7e7e;
			box-sizing: border-box;
			padding: 24upx 36upx 24upx 36upx;
			border-top: 1px solid #aaa;
			left: 0;
			bottom: 0;
			width: 100%;
			font-size: 24upx;
		}

	}
</style>